<!-- 一行，左边是文字，右边也是文字 -->
<template lang="pug">
g-h(j-c="space-between" a-i="center")
  div.key(:style="kStyle") {{ k }}
  div.value(:style="vStyle")
    span.span(:style="spanStyle") {{ v }}
</template>

<script>
export default {
  name: "KvPair",
  props: {
    // 左边的文字
    k: {
      type: String,
      default: "",
    },
    // 右边的文字
    v: {
      type: [Number, String],
      default: "",
    },
    // 左边的样式
    kStyle: {
      type: Object,
      default: () => {},
    },
    // 右边的样式
    vStyle: {
      type: Object,
      default: () => {},
    },
    // 右边文字的样式
    spanStyle: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
    }
  },
}
</script>

<style lang="stylus" scoped>

.c-root
  padding: 0.3rem header-h-padding
  background: white
  border-bottom: 1px solid grey200

.key
  color: grey600
  width: 45%
  text-align: start
  &::after
    content: ":"

.value
  width: 55%
  text-align: end

.span
  display: inline-block
  text-align: start

</style>
